<template>
	<view class="ikz-bid">
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<!-- list -->
		<ikz-topbg></ikz-topbg>
		<view class="ikz-orderdetail">
			<view class="ikz-tipss">
				<view class="ikz-tips-title" v-if="show_info.status == 0">
					待支付
				</view>
				<view class="ikz-tips-title" v-if="show_info.status == 1">
					待接单
				</view>
				<view class="ikz-tips-title" v-if="show_info.status == 2">
					待确认
				</view>
				<view class="ikz-tips-title" v-if="show_info.status == 7">
					待完成
				</view>
				<view class="ikz-tips-title" v-if="show_info.status == 3">
					已完成
				</view>
				<view class="ikz-tips-title" v-if="show_info.status == 4">
					已取消
				</view>
				<!-- <view class="ikz-tips-desc" v-if="show_info.status == 1||show_info.status == 0">
					订单超过一小时将自动取消 
				</view> -->
			</view>
			<view class="ikz-orderdetail-top">
				<view class="ikz-orderdetail-top-code">
					<view class="ikz-orderdetail-top-num">
						订单编号：{{show_info.order_no}}
					</view>
					<view class="ikz-orderdetail-top-status" v-if="show_info.status == 0">
						待支付
					</view>
					<view class="ikz-orderdetail-top-status" v-if="show_info.status == 1">
						待接单
					</view>
					<view class="ikz-orderdetail-top-status" v-if="show_info.status == 2">
						待确认
					</view>
					<view class="ikz-orderdetail-top-status" v-if="show_info.status == 7">
						待完成
					</view>
					<view class="ikz-orderdetail-top-status" v-if="show_info.status == 3">
						已完成
					</view>
					<view class="ikz-orderdetail-top-status" v-if="show_info.status == 4">
						已取消
					</view>
				</view>
				<view class="ikz-orderdetail-list-item">
					<view class="ikz-orderdetail-list-top">
						<view class="ikz-orderdetail-list-head">
							<image class="ikz-orderdetail-list-img" :src="show_info.avatar"></image>
						</view>
						<view class="ikz-orderdetail-list-head-right">
							<view class="ikz-orderdetail-list-head-right-box">
								<view class="ikz-orderdetail-list-head-name">
									{{show_info.nickname}}
								</view>
								<view class="ikz-orderdetail-list-head-time">
									{{show_info.createtime}}
								</view>
							</view>
							<view class="ikz-orderdetail-list-head-right-box">
								<view class="ikz-orderdetail-list-head-card">
									{{show_info.type_text}}
								</view>
								<view style="font-size: 28rpx;">
									订单金额 <text style="color: red;">￥{{show_info.price}}</text>
								</view>
								<view style="font-size: 28rpx;" v-if="isReceiver == 1">
									预估收益 <text class="ikz-orderdetail-list-head-price">￥{{show_info.total_fee}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="ikz-orderdetail-list-content" v-if="show_info.information">
						{{show_info.information}}
					</view>
				</view>
				<view class="ikz-detail-phone" @click="getPhone(show_info.user_mobile)"
					v-if="show_info.status == 2 || show_info.status == 7 ">
					<image src="/static/phone.png" class="ikz-detail-phone-img"></image>
					拨打电话
				</view>
			</view>
			<view class="ikz-orderdetail-other">
				<view class="ikz-orderdetail-other-title" v-if="show_info.down_url">
					<view class="ikz-orderdetail-other-top">
						<view class="ikz-sticky-spot2"></view>
						<view class="ikz-orderdetail-other-top-title">
							下载链接
						</view>
					</view>
					<view class="ikz-orderdetail-other-content">
						{{show_info.down_url}}
					</view>
				</view>
				<view class="ikz-orderdetail-other-title" v-if="show_info.receive_email">
					<view class="ikz-orderdetail-other-top">
						<view class="ikz-sticky-spot1"></view>
						<view class="ikz-orderdetail-other-top-title">
							收货邮箱
						</view>
					</view>
					<view class="ikz-orderdetail-other-content">
						{{show_info.receive_email}}
					</view>
				</view>
				<view class="ikz-orderdetail-other-title" v-if="show_info.receive_limit">
					<view class="ikz-orderdetail-other-top">
						<view class="ikz-sticky-spot2"></view>
						<view class="ikz-orderdetail-other-top-title">
							接单限制
						</view>
					</view>
					<view class="ikz-orderdetail-other-content">
						{{show_info.receive_limit}}
					</view>
				</view>
				<view class="ikz-orderdetail-other-title" v-if="show_info.game_time">
					<view class="ikz-orderdetail-other-top">
						<view class="ikz-sticky-spot1"></view>
						<view class="ikz-orderdetail-other-top-title">
							游戏时间
						</view>
					</view>
					<view class="ikz-orderdetail-other-content">
						{{show_info.game_time}}
					</view>
				</view>
				<view class="ikz-orderdetail-other-title" v-if="show_info.game_platform">
					<view class="ikz-orderdetail-other-top">
						<view class="ikz-sticky-spot"></view>
						<view class="ikz-orderdetail-other-top-title">
							游戏名称
						</view>
					</view>
					<view class="ikz-orderdetail-other-content">
						{{show_info.game_platform}}
					</view>
				</view>
				<view class="ikz-orderdetail-other-title" v-if="show_info.start">
					<view class="ikz-orderdetail-other-top">
						<view class="ikz-sticky-spot"></view>
						<view class="ikz-orderdetail-other-top-title">
							取货地址
						</view>
						<view class="phone" @click="phone(show_info.phone_two)" v-if="show_info.status == 2 || show_info.status == 7 ">
							<image src="/static/phone.png" mode=""></image>
						</view>
					</view>
					<view class="ikz-orderdetail-other-content">
						{{show_info.start}}
					</view>
				</view>
				<view class="ikz-orderdetail-other-title" v-if="show_info.destination">
					<view class="ikz-orderdetail-other-top">
						<view class="ikz-sticky-spot1"></view>
						<view class="ikz-orderdetail-other-top-title">
							收货地址 
						</view>	
						
						<view class="phone" @click="phone(show_info.phone_one)" v-if="show_info.status == 2 || show_info.status == 7 ">
							<image src="/static/phone.png" mode=""></image>
						</view>
					</view>
					<view class="ikz-orderdetail-other-content">
						{{show_info.destination}}
					</view>
				</view>

				<view class="ikz-orderdetail-other-title" v-if="show_info.lease_duration">
					<view class="ikz-orderdetail-other-top">
						<view class="ikz-sticky-spot2"></view>
						<view class="ikz-orderdetail-other-top-title">
							租借时长
						</view>
					</view>
					<view class="ikz-orderdetail-other-content">
						{{show_info.lease_duration}}
					</view>
				</view>
				<view class="ikz-orderdetail-other-title" v-if="show_info.hope_arrive">
					<view class="ikz-orderdetail-other-top">
						<view class="ikz-sticky-spot1"></view>
						<view class="ikz-orderdetail-other-top-title" v-if="show_info.type == 4">
							预计交付时间
						</view>
						<view class="ikz-orderdetail-other-top-title" v-else>
							送达时间
						</view>
					</view>
					<view class="ikz-orderdetail-other-content">
						{{show_info.hope_arrive}}
					</view>
				</view>
			</view>


			<view class="ikz-take" v-for="(item,index) in show_info.express" :key="index">
				<image class="ikz-take-img" src="/static/campus/box.png"></image>
				<view class="ikz-take-center">
					<view class="ikz-take-title">
						{{item.type}}：￥{{item.price}}
					</view>
					<view class="ikz-take-tips">
						{{item.desc}}
					</view>
				</view>
				<view class="ikz-take-right">
					<view style="width: 50rpx;height: 50rpx;">
					</view>
					<view class="ikz-take-num">x{{item.number||''}}</view>
					<view style="width: 50rpx;height: 50rpx;">
					</view>
				</view>
			</view>
 
			<view class="ikz-tips" v-if="show_info.price">
				<view class="ikz-tips-item">
					<view class="ikz-tips-price-title">
						价格
					</view>
					<view class="ikz-tips-price">
						￥{{ show_info.price }}
					</view>
				</view>
			</view>
			<view class="ikz-tips" v-if="show_info.reward">
				<view class="ikz-tips-item">
					<view class="ikz-tips-price-title">
						赏金
					</view>
					<view class="ikz-tips-price">
						￥{{ show_info.reward }}
					</view>
				</view>
			</view>
			<view class="ikz-tips" v-if="show_info.remarks">
				<view class="ikz-tips-item">
					<view class="ikz-tips-help">
						<view class="ikz-tips-help-title">
							备注信息
						</view>
						<view class="ikz-tips-help-content">
							{{show_info.remarks}}
						</view> 
					</view>
				</view>
			</view>
			<view class="ikz-tips"
				v-if="show_info.annex_information_images && show_info.annex_information_images.length">
				<view class="ikz-tips-item">
					<view class="ikz-tips-help">
						<view class="ikz-tips-help-title">
							附件信息
						</view>
						<view class="ikz-updata-bottom">
							<view class="ikz-updata-add" v-for="(item,index) in show_info.annex_information_images"
								:key="index">
								<image class="ikz-updata-img" mode="aspectFill"
									@click="showPic(show_info.annex_information_images,item)" :src="item"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ikz-bottom" v-if="show_info.status == 1">
				<view class="ikz-help-btn" @click="orderReceiving">帮助Ta
				</view>
			</view>
			<view class="ikz-bottom" v-if="show_info.status == 2">
				<view class="ikz-help-btn" @click="orderService">送达
				</view>
			</view>
		</view>
		<!-- list -->
	</view>
</template>

<script>
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	import ikzOrderdetail from '@/pages/Component/Public/Orderdetail/public/orderdetail/orderdetail.vue';
	import ikzTopbg from '@/pages/Component/Public/Topbg/public/topbg/topbg.vue';
	var app = getApp();
	import ikz from '@/pages/Common/tools.js';
	export default {
		components: {
			ikzLoading,
			ikzOrderdetail,
			ikzTopbg
		},
		props: {
			receiver: {
				type: String,
			}
		},
		data() {
			return {
				isReceiver: 0,
				id: '',
				loading_css: {
					display: 'flex',
				},
				show_info: {},
				show_status: 2,
				// 模板id
				template_id: {},
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.detailInfo((res) => {
				this.loading_css.display = 'none';
			});
			this.templateId()
		},
		onPullDownRefresh() {
			this.detailInfo((res) => {
				uni.stopPullDownRefresh();
			});
		},
		onShow() {
			this.handleReceiver()
			if (this.show_status == 2) {
				this.show_status = 3
			} else {
				this.detailInfo((res) => {
					this.loading_css.display = 'none';
				});
			}
		},
		methods: {
			phone(e){
				uni.makePhoneCall({
					phoneNumber:e
				})
			},
			// 判断是否是接单员 
			handleReceiver() {
				var path = '/xyb/user/is_receiver';
				var url = app.globalData.adminPath + path;
				var data = {
					app_plat: "MP-WEIXIN",
					token: uni.getStorageSync('local_user_session'),
					agent_id: uni.getStorageSync('default_agent').id || ''
				}
				if (data.token) {
					uni.request({
						url: url,
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						data: data,
						method: 'POST',
						success: (res) => {
							console.log("是否为接单员", res.data.data.is_receiver);
							uni.setStorageSync('receivers', res.data.data.is_receiver)
							this.isReceiver = res.data.data.is_receiver
						},
						fail: function(res) {
							//调用接口失败或回传失败
							uni.showModal({
								title: '服务器繁忙',
								content: '服务器繁忙或网络不稳定，请稍后再试！'
							})
						},
					})
				}
			},
			showPic(urls, current) {
				wx.previewImage({
					current: current, // 当前显示图片的http链接
					urls: urls // 需要预览的图片http链接列表
				})
			},
			//拨打电话
			getPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				})
			},
			//请求页面数据 
			detailInfo(fn) {
				var path = '/xyb/order/detail';
				var data = {
					id: this.id
				};
				ikz.post(path, data, res => {
					if (res.data.code) {
						this.show_info = res.data.data;
						if (this.show_info.status == 2 || this.show_info.status == 7 || this.show_info.status ==
							3) {
							this.privacy_info();
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
					fn();
				});
			},
			//查看隐私数据
			privacy_info() {
				var path = '/xyb/order/receiver_order_detail';
				var data = {
					orderid: this.id
				};
				ikz.post(path, data, res => {
					if (res.data.code) {
						if (res.data.data.annex_information_images) {
							this.show_info.annex_information_images = res.data.data.annex_information_images
						}
						if (res.data.data.information) {
							this.show_info.information = res.data.data.information;
						}
						if (res.data.data.game_id) {
							this.show_info.game_id = res.data.data.game_id;
						}
						if (res.data.data.user_mobile) {
							this.show_info.user_mobile = res.data.data.user_mobile;
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
				});
			},
			orderService() {
				var that = this;
				var path = '/xyb/order_receive/receive_confirm_arrive';
				var data = {
					orderid: this.id
				};
				ikz.post(path, data, res => {
					if (res.data.code) {
						uni.showToast({
							title: '送达成功',
							duration: 2000
						});
						that.detailInfo((res) => {});
						// setTimeout(function(){
						//   uni.navigateBack({
						//       delta: 1
						//   });
						// },2000)
						that.$forceUpdate();
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
				});
			},
			//获取模板参数
			templateId(fn) {
				var path = '/xyb/wechat_mini_push/template_id_list';
				var data = {

				}
				ikz.post(path, data, (res) => {
					if (res.data.code) {
						this.template_id = res.data.data;
						console.log("template_id的值", this.template_id);
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
					fn();
				})
			},
			//帮助他 
			orderReceiving() {
				var that = this;
				//订阅消息
				var temp_id = [
					this.template_id.order_complete,
				]
				uni.requestSubscribeMessage({
					tmplIds: temp_id,
					success(res) {
						that.subimt()
					},
					fail(res) {
						if (res.errCode == 20004) {
							uni.showModal({
								title: '提示',
								content: '请前往设置打开接受通知',
								confirmText: '确定',
								success(res) {
									that.subimt()
								}
							})

						} else {
							uni.showModal({
								title: '提示',
								content: '未订阅消息，无法接收到订单通知',
								confirmText: '确定',
								success(res) {
									that.subimt()
								}
							})

						}

					}
				})
			},
			// 帮助
			subimt() {
				var that = this;
				var path = '/xyb/order_receive/add';
				var data = {
					orderid: this.id
				};
				ikz.post(path, data, res => {
					if (res.data.code) {
						uni.showToast({
							title: '接单成功',
							duration: 2000
						});
						that.detailInfo((res) => {});
						// setTimeout(function(){
						//   uni.navigateBack({
						//       delta: 1
						//   });
						// },2000)
						that.$forceUpdate();
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
				});
			}

		}
	};
</script>

<style lang="scss">
	.phone{
		margin-left:400rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: #FBAB7E;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
		 
			width: 30rpx;
			height: 30rpx;
		}
	}
	page {
		width: 100%;
		height: 100%;
		background: #F3F3F3;
	}

	.ikz-tipss {
		box-sizing: border-box;
		width: 90%;
		margin: 30rpx auto;
		border-radius: 15rpx;
	}

	.ikz-tips-title {
		color: #fff;

	}

	.ikz-tips-desc {
		font-size: 25rpx;
		color: #fff;
		margin-top: 10rpx;
	}

	.ikz-orderdetail {
		width: 100%;
		height: 100%;
	}

	.ikz-orderdetail-top {
		box-sizing: border-box;
		width: 95%;
		background: #fff;
		margin: 30rpx auto;
		border-radius: 15rpx;
	}

	.ikz-orderdetail-top-code {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	}

	.ikz-orderdetail-top-num {
		box-sizing: border-box;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #888;
	}

	.ikz-orderdetail-top-status {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: linear-gradient(to right, #FDAF64, #FBAB7E);
		color: #fff;
		font-size: 28rpx;
		border-top-right-radius: 15rpx;
		border-bottom-left-radius: 15rpx;
	}

	.ikz-orderdetail-list-item {
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.ikz-orderdetail-list-top {
		display: flex;
		align-items: center;
	}

	.ikz-orderdetail-list-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.ikz-orderdetail-list-head-right {
		margin-left: 20rpx;
		width: 85%;
	}

	.ikz-orderdetail-list-head-right-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 50rpx;
	}

	.ikz-orderdetail-list-head-time {
		color: #888;
		font-size: 25rpx;
	}

	.ikz-orderdetail-list-head-card {
		background-color: #FDAF64;
		color: #fff;
		font-size: 22rpx;
		border-radius: 15rpx;
		padding: 0px 16rpx;
		text-align: center;
		line-height: 45rpx;

	}

	.ikz-orderdetail-list-head-price {
		color: #FDAF64;
	}

	.ikz-orderdetail-list-content {
		line-height: 45rpx;
		font-size: 30rpx;
		margin: 15rpx 0;
	}

	.ikz-orderdetail-list-head-name {
		font-size: 28rpx;
	}



	/* dibu*/
	.ikz-orderdetail-other {
		box-sizing: border-box;
		width: 95%;
		background: #fff;
		margin: 30rpx auto;
		border-radius: 15rpx;
	}

	.ikz-orderdetail-other-top {
		display: flex;
		align-items: center;
	}

	.ikz-orderdetail-other-title {
		box-sizing: border-box;
		padding: 20rpx;
		line-height: 60rpx;
	}

	.ikz-orderdetail-other-top-title {
		color: #888;
		font-size: 28rpx;
	}

	.ikz-orderdetail-other-content {
		margin-left: 65rpx;
	}

	.ikz-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.ikz-help-btn {
		position: relative;
		width: 80%;
		background: #42D5BE;
		border-radius: 50rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		margin-bottom: 15rpx;
	}

	.ikz-help-btn1 {
		position: relative;
		width: 80%;
		background: #d51316;
		border-radius: 50rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		margin-bottom: 20rpx;
	}

	/* ad */

	/* 快递 */
	.ikz-take {
		box-sizing: border-box;
		padding: 30rpx;
		width: 95%;
		margin: 30rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-radius: 15rpx;
	}

	.ikz-take-img {
		width: 80rpx;
		height: 80rpx;
	}

	.ikz-take-title {
		font-size: 30rpx;
	}

	.ikz-take-center {
		width: 50%;
		line-height: 50rpx;
	}

	.ikz-take-tips {
		color: #888888;
		font-size: 28rpx;
	}

	.ikz-take-option {
		width: 50rpx;
		height: 50rpx;
	}

	.ikz-take-right {
		width: 25%;
		display: flex;
		align-items: center;
	}

	.ikz-take-num {
		width: 40%;
		text-align: center;
	}

	/* 快递 */


	.ikz-tips {
		box-sizing: border-box;
		padding: 10rpx 40rpx;
		width: 95%;
		background: #fff;
		margin: 10px auto;
		border-radius: 15rpx;
	}

	.ikz-tips-item {
		padding: 20rpx 0px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ikz-tips-item:before {
		content: " ";
		position: absolute;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1rpx solid #d9d9d9;
		color: #d9d9d9;
		left: 0px;
	}

	.ikz-tips-item:first-child:before {
		display: none;
	}

	.ikz-tips-help-title {
		line-height: 60rpx;
	}

	.ikz-tips-help-content {
		line-height: 50rpx;
		color: #828282;
	}

	.ikz-tips-price {
		color: #828282;
	}

	.ikz-updata-img {
		width: 150rpx;
		height: 150rpx;
	}

	.ikz-updata-add {
		position: relative;
		margin-left: 10rpx;
	}

	.ikz-updata-img {
		width: 150rpx;
		height: 150rpx;
	}

	.ikz-updata-bottom {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.ikz-sticky-spot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #76A8FD;
		margin-right: 20rpx;
	}

	.ikz-sticky-spot1 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #FF8800;
		margin-right: 20rpx;
	}

	.ikz-sticky-spot2 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #009423;
		margin-right: 20rpx;
	}

	.ikz-detail-phone {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #85B2FF;
		color: #fff;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		line-height: 80rpx;
	}

	.ikz-detail-phone-img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	/* 其他 */
</style>